
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont gj-caidan"></i>
                    <div class="name">菜单</div>
                    <div class="fontclass">.gj-caidan</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-roundcheckfill"></i>
                    <div class="name">round_check_fill</div>
                    <div class="fontclass">.gj-roundcheckfill</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-roundcheck"></i>
                    <div class="name">round_check</div>
                    <div class="fontclass">.gj-roundcheck</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-round"></i>
                    <div class="name">round</div>
                    <div class="fontclass">.gj-round</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-all"></i>
                    <div class="name">all</div>
                    <div class="fontclass">.gj-all</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-back"></i>
                    <div class="name">back</div>
                    <div class="fontclass">.gj-back</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-cart"></i>
                    <div class="name">cart</div>
                    <div class="fontclass">.gj-cart</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-category"></i>
                    <div class="name">Category</div>
                    <div class="fontclass">.gj-category</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-close"></i>
                    <div class="name">close</div>
                    <div class="fontclass">.gj-close</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-delete"></i>
                    <div class="name">delete</div>
                    <div class="fontclass">.gj-delete</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-edit"></i>
                    <div class="name">edit</div>
                    <div class="fontclass">.gj-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-email"></i>
                    <div class="name">email</div>
                    <div class="fontclass">.gj-email</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-favorite"></i>
                    <div class="name">favorite</div>
                    <div class="fontclass">.gj-favorite</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-form"></i>
                    <div class="name">form</div>
                    <div class="fontclass">.gj-form</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-less"></i>
                    <div class="name">less</div>
                    <div class="fontclass">.gj-less</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-moreunfold"></i>
                    <div class="name">more_unfold</div>
                    <div class="fontclass">.gj-moreunfold</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-more"></i>
                    <div class="name">more</div>
                    <div class="fontclass">.gj-more</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-pic"></i>
                    <div class="name">pic</div>
                    <div class="fontclass">.gj-pic</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.gj-search</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-selected"></i>
                    <div class="name">selected</div>
                    <div class="fontclass">.gj-selected</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-set"></i>
                    <div class="name">set</div>
                    <div class="fontclass">.gj-set</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-success"></i>
                    <div class="name">success</div>
                    <div class="fontclass">.gj-success</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-viewgallery"></i>
                    <div class="name">ViewGallery</div>
                    <div class="fontclass">.gj-viewgallery</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-account"></i>
                    <div class="name">account</div>
                    <div class="fontclass">.gj-account</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-remind"></i>
                    <div class="name">remind</div>
                    <div class="fontclass">.gj-remind</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-service"></i>
                    <div class="name">service</div>
                    <div class="fontclass">.gj-service</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-bad"></i>
                    <div class="name">bad</div>
                    <div class="fontclass">.gj-bad</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-good"></i>
                    <div class="name">good</div>
                    <div class="fontclass">.gj-good</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-loading"></i>
                    <div class="name">loading、等待、菊花</div>
                    <div class="fontclass">.gj-loading</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-xuanzhong"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.gj-xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-caidan1"></i>
                    <div class="name">菜单</div>
                    <div class="fontclass">.gj-caidan1</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-0"></i>
                    <div class="name">gj-0</div>
                    <div class="fontclass">.gj-0</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-4"></i>
                    <div class="name">gj-4</div>
                    <div class="fontclass">.gj-4</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-1"></i>
                    <div class="name">gj-1</div>
                    <div class="fontclass">.gj-1</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-3"></i>
                    <div class="name">gj-3</div>
                    <div class="fontclass">.gj-3</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-6"></i>
                    <div class="name">gj-6</div>
                    <div class="fontclass">.gj-6</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-5"></i>
                    <div class="name">gj-5</div>
                    <div class="fontclass">.gj-5</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-2"></i>
                    <div class="name">gj-2</div>
                    <div class="fontclass">.gj-2</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-7"></i>
                    <div class="name">gj-7</div>
                    <div class="fontclass">.gj-7</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-9"></i>
                    <div class="name">gj-9</div>
                    <div class="fontclass">.gj-9</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-8"></i>
                    <div class="name">gj-8</div>
                    <div class="fontclass">.gj-8</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-gouwuche"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.gj-gouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-dingdan"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.gj-dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-gouwuche1"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.gj-gouwuche1</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-fenlei"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.gj-fenlei</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-guojiaguan"></i>
                    <div class="name">国家馆</div>
                    <div class="fontclass">.gj-guojiaguan</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-peixunxueyuan"></i>
                    <div class="name">培训学院</div>
                    <div class="fontclass">.gj-peixunxueyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-dianzhuzhuanxiang"></i>
                    <div class="name">店主专享</div>
                    <div class="fontclass">.gj-dianzhuzhuanxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-pinpaiguan"></i>
                    <div class="name">品牌馆</div>
                    <div class="fontclass">.gj-pinpaiguan</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-shoucang"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.gj-shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.gj-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-rexiaobang"></i>
                    <div class="name">热销榜</div>
                    <div class="fontclass">.gj-rexiaobang</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-xinpintuijian"></i>
                    <div class="name">新品推荐</div>
                    <div class="fontclass">.gj-xinpintuijian</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-wode1"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.gj-wode1</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-daifahuo"></i>
                    <div class="name">待发货</div>
                    <div class="fontclass">.gj-daifahuo</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-daishouhuo"></i>
                    <div class="name">待收货</div>
                    <div class="fontclass">.gj-daishouhuo</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-shouhoutuikuan"></i>
                    <div class="name">售后退款</div>
                    <div class="fontclass">.gj-shouhoutuikuan</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-daifukuan"></i>
                    <div class="name">待付款</div>
                    <div class="fontclass">.gj-daifukuan</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-rmb"></i>
                    <div class="name">人民币符号(1)</div>
                    <div class="fontclass">.gj-rmb</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi1"></i>
                    <div class="name">19_复制</div>
                    <div class="fontclass">.gj-_fuzhi1</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi"></i>
                    <div class="name">26_复制</div>
                    <div class="fontclass">.gj-_fuzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi5"></i>
                    <div class="name">28_复制</div>
                    <div class="fontclass">.gj-_fuzhi5</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi6"></i>
                    <div class="name">27_复制</div>
                    <div class="fontclass">.gj-_fuzhi6</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-icon-test"></i>
                    <div class="name">1(1)</div>
                    <div class="fontclass">.gj-icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi2"></i>
                    <div class="name">收入</div>
                    <div class="fontclass">.gj-_fuzhi2</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi3"></i>
                    <div class="name">6_复制</div>
                    <div class="fontclass">.gj-_fuzhi3</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_"></i>
                    <div class="name">a_1</div>
                    <div class="fontclass">.gj-a_</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_1"></i>
                    <div class="name">a_2</div>
                    <div class="fontclass">.gj-a_1</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_2"></i>
                    <div class="name">a_6</div>
                    <div class="fontclass">.gj-a_2</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_3"></i>
                    <div class="name">a_11</div>
                    <div class="fontclass">.gj-a_3</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_4"></i>
                    <div class="name">a_7</div>
                    <div class="fontclass">.gj-a_4</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_5"></i>
                    <div class="name">a_8</div>
                    <div class="fontclass">.gj-a_5</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_6"></i>
                    <div class="name">a_12</div>
                    <div class="fontclass">.gj-a_6</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_7"></i>
                    <div class="name">a_9</div>
                    <div class="fontclass">.gj-a_7</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_8"></i>
                    <div class="name">a_16</div>
                    <div class="fontclass">.gj-a_8</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_9"></i>
                    <div class="name">a_10</div>
                    <div class="fontclass">.gj-a_9</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_10"></i>
                    <div class="name">a_14</div>
                    <div class="fontclass">.gj-a_10</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_11"></i>
                    <div class="name">a_13</div>
                    <div class="fontclass">.gj-a_11</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_12"></i>
                    <div class="name">a_18</div>
                    <div class="fontclass">.gj-a_12</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_13"></i>
                    <div class="name">a_20</div>
                    <div class="fontclass">.gj-a_13</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_14"></i>
                    <div class="name">a_15</div>
                    <div class="fontclass">.gj-a_14</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_15"></i>
                    <div class="name">a_17</div>
                    <div class="fontclass">.gj-a_15</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_16"></i>
                    <div class="name">a_21</div>
                    <div class="fontclass">.gj-a_16</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_17"></i>
                    <div class="name">a_19</div>
                    <div class="fontclass">.gj-a_17</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_18"></i>
                    <div class="name">a_22</div>
                    <div class="fontclass">.gj-a_18</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_19"></i>
                    <div class="name">a_23</div>
                    <div class="fontclass">.gj-a_19</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_20"></i>
                    <div class="name">a_24</div>
                    <div class="fontclass">.gj-a_20</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_21"></i>
                    <div class="name">a_25</div>
                    <div class="fontclass">.gj-a_21</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_22"></i>
                    <div class="name">a_26</div>
                    <div class="fontclass">.gj-a_22</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_23"></i>
                    <div class="name">a_5</div>
                    <div class="fontclass">.gj-a_23</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_26"></i>
                    <div class="name">a_29</div>
                    <div class="fontclass">.gj-a_26</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_27"></i>
                    <div class="name">a_30</div>
                    <div class="fontclass">.gj-a_27</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_28"></i>
                    <div class="name">a_27</div>
                    <div class="fontclass">.gj-a_28</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_29"></i>
                    <div class="name">a_32</div>
                    <div class="fontclass">.gj-a_29</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_30"></i>
                    <div class="name">a_28</div>
                    <div class="fontclass">.gj-a_30</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_31"></i>
                    <div class="name">a_31</div>
                    <div class="fontclass">.gj-a_31</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_32"></i>
                    <div class="name">a_34</div>
                    <div class="fontclass">.gj-a_32</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_33"></i>
                    <div class="name">a_35</div>
                    <div class="fontclass">.gj-a_33</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_34"></i>
                    <div class="name">a_36</div>
                    <div class="fontclass">.gj-a_34</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_35"></i>
                    <div class="name">a_33</div>
                    <div class="fontclass">.gj-a_35</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_36"></i>
                    <div class="name">a_38</div>
                    <div class="fontclass">.gj-a_36</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_37"></i>
                    <div class="name">a_39</div>
                    <div class="fontclass">.gj-a_37</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_38"></i>
                    <div class="name">a_37</div>
                    <div class="fontclass">.gj-a_38</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_39"></i>
                    <div class="name">a_41</div>
                    <div class="fontclass">.gj-a_39</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_40"></i>
                    <div class="name">a_43</div>
                    <div class="fontclass">.gj-a_40</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_41"></i>
                    <div class="name">a_40</div>
                    <div class="fontclass">.gj-a_41</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_42"></i>
                    <div class="name">a_42</div>
                    <div class="fontclass">.gj-a_42</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_43"></i>
                    <div class="name">a_44</div>
                    <div class="fontclass">.gj-a_43</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_44"></i>
                    <div class="name">a_45</div>
                    <div class="fontclass">.gj-a_44</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_45"></i>
                    <div class="name">a_46</div>
                    <div class="fontclass">.gj-a_45</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_46"></i>
                    <div class="name">a_47</div>
                    <div class="fontclass">.gj-a_46</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_47"></i>
                    <div class="name">a_49</div>
                    <div class="fontclass">.gj-a_47</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_48"></i>
                    <div class="name">a_50</div>
                    <div class="fontclass">.gj-a_48</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_49"></i>
                    <div class="name">a_52</div>
                    <div class="fontclass">.gj-a_49</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_50"></i>
                    <div class="name">a_48</div>
                    <div class="fontclass">.gj-a_50</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_51"></i>
                    <div class="name">a_53</div>
                    <div class="fontclass">.gj-a_51</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_52"></i>
                    <div class="name">a_51</div>
                    <div class="fontclass">.gj-a_52</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_53"></i>
                    <div class="name">a_54</div>
                    <div class="fontclass">.gj-a_53</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_54"></i>
                    <div class="name">a_58</div>
                    <div class="fontclass">.gj-a_54</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_55"></i>
                    <div class="name">a_55</div>
                    <div class="fontclass">.gj-a_55</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_56"></i>
                    <div class="name">a_56</div>
                    <div class="fontclass">.gj-a_56</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_57"></i>
                    <div class="name">a_60</div>
                    <div class="fontclass">.gj-a_57</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_58"></i>
                    <div class="name">a_59</div>
                    <div class="fontclass">.gj-a_58</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_59"></i>
                    <div class="name">a_57</div>
                    <div class="fontclass">.gj-a_59</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_60"></i>
                    <div class="name">a_61</div>
                    <div class="fontclass">.gj-a_60</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_61"></i>
                    <div class="name">a_63</div>
                    <div class="fontclass">.gj-a_61</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_62"></i>
                    <div class="name">a_64</div>
                    <div class="fontclass">.gj-a_62</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_63"></i>
                    <div class="name">a_62</div>
                    <div class="fontclass">.gj-a_63</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_64"></i>
                    <div class="name">a_65</div>
                    <div class="fontclass">.gj-a_64</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_65"></i>
                    <div class="name">a_66</div>
                    <div class="fontclass">.gj-a_65</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_66"></i>
                    <div class="name">a_67</div>
                    <div class="fontclass">.gj-a_66</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_67"></i>
                    <div class="name">a_69</div>
                    <div class="fontclass">.gj-a_67</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_68"></i>
                    <div class="name">a_68</div>
                    <div class="fontclass">.gj-a_68</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_69"></i>
                    <div class="name">a_73</div>
                    <div class="fontclass">.gj-a_69</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_70"></i>
                    <div class="name">a_70</div>
                    <div class="fontclass">.gj-a_70</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_71"></i>
                    <div class="name">a_72</div>
                    <div class="fontclass">.gj-a_71</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_72"></i>
                    <div class="name">a_71</div>
                    <div class="fontclass">.gj-a_72</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi4"></i>
                    <div class="name">7_复制</div>
                    <div class="fontclass">.gj-_fuzhi4</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi7"></i>
                    <div class="name">10_复制</div>
                    <div class="fontclass">.gj-_fuzhi7</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi8"></i>
                    <div class="name">6_复制</div>
                    <div class="fontclass">.gj-_fuzhi8</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi9"></i>
                    <div class="name">9_复制</div>
                    <div class="fontclass">.gj-_fuzhi9</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi10"></i>
                    <div class="name">8_复制</div>
                    <div class="fontclass">.gj-_fuzhi10</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-_fuzhi11"></i>
                    <div class="name">11_复制</div>
                    <div class="fontclass">.gj-_fuzhi11</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_24"></i>
                    <div class="name">a_3</div>
                    <div class="fontclass">.gj-a_24</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-b_"></i>
                    <div class="name">b_1</div>
                    <div class="fontclass">.gj-b_</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-b_1"></i>
                    <div class="name">b_3</div>
                    <div class="fontclass">.gj-b_1</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-b_2"></i>
                    <div class="name">b_4</div>
                    <div class="fontclass">.gj-b_2</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-b_3"></i>
                    <div class="name">b_5</div>
                    <div class="fontclass">.gj-b_3</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-b_4"></i>
                    <div class="name">b_2</div>
                    <div class="fontclass">.gj-b_4</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-a_25"></i>
                    <div class="name">a_4</div>
                    <div class="fontclass">.gj-a_25</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-bangzhuyukefu"></i>
                    <div class="name">帮助与客服</div>
                    <div class="fontclass">.gj-bangzhuyukefu</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-dianchangdidai"></i>
                    <div class="name">店长地带</div>
                    <div class="fontclass">.gj-dianchangdidai</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-dingdan1"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.gj-dingdan1</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-wodejifen"></i>
                    <div class="name">我的积分</div>
                    <div class="fontclass">.gj-wodejifen</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-wodeshoucang"></i>
                    <div class="name">我的收藏</div>
                    <div class="fontclass">.gj-wodeshoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-shouhuodizhi"></i>
                    <div class="name">收货地址</div>
                    <div class="fontclass">.gj-shouhuodizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-shouhou"></i>
                    <div class="name">售后</div>
                    <div class="fontclass">.gj-shouhou</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-daishouhuo1"></i>
                    <div class="name">待收货</div>
                    <div class="fontclass">.gj-daishouhuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-daifukuan1"></i>
                    <div class="name">待付款</div>
                    <div class="fontclass">.gj-daifukuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont gj-daifahuo1"></i>
                    <div class="name">待发货</div>
                    <div class="fontclass">.gj-daifahuo1</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">gj-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
